<template>
  <div class="hello" >
    <el-steps :active="4" align-center>
      <span class="test">流程指示</span>
      <el-step title="导入" description="选择文件类型以及上传的文件(注意：上传的文件需要与选择的文件类型保持一致)"></el-step>
      <el-step title="查看" description="导入后查看,注意选择相应的模板 数字压力计校准记录 或 弹性元件式一般指针表校验记录"></el-step>
      <el-step title="条件查询" description="注意开始时间和结束时间,被校表编号是模糊查询"></el-step>
      <el-step title="导出" description="导出前填入需要插入的值(注意：所有内容都必须填写)"></el-step>
    </el-steps>

    <el-form :inline="true"  class="demo-form-inline" style="height: 110px;">
      <el-form-item label="文件类型" >
        <el-select v-model="option" placeholder="请选择" @change="selectProductType" style="width: 350px">
          <el-option
            v-for="item in options"
            :key="item.value" 
            :label="item.label"
            :value="{ value: item.value, label: item.label}">
          </el-option>
        </el-select>
      
        <el-upload prop="file"
          ref="upload"
          accept=".xlsx,.xls"
          :limit = "fileUpLoad"
          action=""
          :file-list="fileList"
          :on-exceed="handleExceed"
          :auto-upload="false">
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <el-button style="margin-left:5px" size="small" type="primary" @click="submitUploadList" >导入</el-button>
        </el-upload>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data(){
    return {
      option:'',
      options:[{
          label:'数字压力计校准记录(拟废止)',
          value:'test1',
        },{
          label:'弹性元件式一般指针表校验记录(拟废止)',
          value:'test3',
        }],
      fileList: [],
      newData:'', 
      fileUpLoad:1,//限制文件上传数量
      
      //表格数据
      fileData:[]
    }
  },
    
  methods: {
    
    //文件导入
    submitUploadList() {
      let uploader = this.$refs.upload; // 获取上传组件的引用
      let fileList = uploader.uploadFiles; // 获取已选择的文件列表
      let file = fileList[0].raw; // 获取文件
      let fileName = file.name;  // 获取上传的文件名
      let hzm = fileName.substring(fileName.indexOf(".")+1);//获取文件后缀名
      
      //判断文件是否是excel文件
      if(hzm.toLowerCase() == "xlsx" || hzm.toLowerCase() == "xls"){
        
        //var newFileName = this.newData+"."+hzm;  //给文件赋值 新名字
        
        let formData = new FormData();
        formData.append("fileName",fileName);
        formData.append("startTime",new Date().toLocaleString());
        formData.append("file", file);   //拿到存在fileList的文件存放到formData中

        if(this.newData.substring(0,this.newData.indexOf("(")) == "数字压力计校准记录"){
          
          //文件上传请求  
          this.axios.post("/excelImport/importExcel", formData, {
            headers:{
              "Content-Type": "multipart/form-data;charset=utf-8"
            }
            
          }).then(res => {
            if (res.status == 200) {
              this.$message({
                message: '数字压力计校准记录 上传成功!',
                type: 'success'
              });
              this.$refs['upload'].clearFiles(); //清除所选择的文件
              setTimeout(() => {
                //提交成功后 页面刷新
                window.location.reload();
              }, 1000)
            }
          })
        }else if(this.newData.substring(0,this.newData.indexOf("(")) == "弹性元件式一般指针表校验记录") {
          //文件上传请求  
          this.axios.post("/excelImport/importExcel", formData, {
            headers:{
              "Content-Type": "multipart/form-data;charset=utf-8"
            }
            
          }).then(res => {
            if (res.status == 200) {
              this.$message({
                message: '弹性元件式一般指针表校准记录 上传成功!',
                type: 'success'
              });

              this.$refs['upload'].clearFiles(); //清除所选择的文件

              setTimeout(() => {
                //提交成功后 页面刷新
                window.location.reload();
              }, 1000)
            }
          })

        }else{
          this.$alert('请选择文件类型', '提示信息', {
            confirmButtonText: '确定'
          });
          this.$refs['upload'].clearFiles(); //清除所选择的文件
          return ;
        }
      }else{
        this.$alert('请选择excel文件', '提示信息', {
          confirmButtonText: '确定'
        });
        this.$refs['upload'].clearFiles(); //清除所选择的文件
        return ;
      }        
    },

    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
        
    //获取下拉框 label 的值
    selectProductType(data){
      //var labelName = data.label;
      this.newData = data.label;
      return this.newData;
    }
  }
}
</script>

<style>
  .test{
    color: #606266;
  }
  span{
    font-size: 14px;
  }
</style>